<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { RouteMap, useRouter } from '@/router';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { cancelOrder, getOrderDetail } from '@/api/car';
import { format } from 'date-fns';
import type { OrderDetails } from '@/types/carOrder';
import { useAuthStore } from '@/store/auth';
import AptCarOrderPackage from '../../components/apt-car-order-package/apt-car-order-package.vue';
import { usePopupStore } from '@/store/popup';
import AptCarRefundDetail from '../../components/apt-car-refund-detail/apt-car-refund-detail.vue';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const popupStore = usePopupStore();

const authStore = useAuthStore();
const router = useRouter();
const bottomZIndex = ref(10);
const pricePopupOpen = ref(false);
const pricePopupRef = ref();
const qrcodeRef = ref();
const qrcodePopupOpen = ref(false);
const qrcodePopupRef = ref();
const carPackageTipsRef = ref();
const carOrderPackageRef = ref();
const carRefundDetailRef = ref();
const orderSn = ref('');
const orderInfo = ref<OrderDetails>();
const qrcodeOptions = ref({
  margin: 10
});

function openPricePopup() {
  bottomZIndex.value = 9999;
  pricePopupOpen.value = !pricePopupOpen.value;
  if (pricePopupOpen.value) {
    pricePopupRef.value?.open();
  } else {
    pricePopupRef.value?.close();
  }
}

function handleClosePricePopup() {
  pricePopupOpen.value = false;
  pricePopupRef.value?.close();
}

function openQrcodePopup() {
  bottomZIndex.value = 9999;
  qrcodePopupOpen.value = true;
  qrcodePopupRef.value?.open();
  qrcodeRef.value.make();
}

function handleCloseQrcodePopup() {
  qrcodePopupOpen.value = false;
  qrcodePopupRef.value?.close();
}

function handleOpenCarPackageTips() {
  bottomZIndex.value = 10;
  if (orderInfo.value?.order_type == 'CRS') {
    carPackageTipsRef.value.open();
  } else {
    popupStore.openCarOrderPackage();
  }
}

function handleOpenCarRefundDetail() {
  bottomZIndex.value = 10;
  popupStore.openCarRefundDetail();
}

async function getOrderInfo() {
  const res = await getOrderDetail(orderSn.value);
  if (res.code == 0) {
    orderInfo.value = res.data.detail;
  } else {
    uni.navigateBack();
  }
}

function copyOrderNo() {
  uni.setClipboardData({
    data: orderInfo.value!.order_sn,
    success: function () {
      uni.showToast({
        title: 'success',
        icon: 'none'
      });
    }
  });
}

function contactDriver() {
  let contactTab = [t('LKey_onlineService')];
  if (orderInfo.value?.driver_info?.phone) {
    contactTab.unshift(
      t('LCKey_ByPhone') +
        '：' +
        orderInfo.value?.driver_info?.phone_area +
        orderInfo.value?.driver_info?.phone
    );
  }
  uni.showActionSheet({
    itemList: contactTab,
    success: function (res) {
      if (orderInfo.value?.driver_info?.phone) {
        if (res.tapIndex == 0) {
          if (orderInfo.value?.driver_info?.phone) {
            uni.makePhoneCall({
              phoneNumber:
                orderInfo.value?.driver_info?.phone_area + orderInfo.value?.driver_info?.phone
            });
          }
        } else if (res.tapIndex == 1) {
          if (authStore.isLoggedIn) {
            uni.navigateTo({
              url: '/pages/cs/cs'
            });
          } else {
            uni.navigateTo({
              url: '/pages/auth/login'
            });
          }
        }
      } else {
        if (res.tapIndex == 0) {
          if (authStore.isLoggedIn) {
            uni.navigateTo({
              url: '/pages/cs/cs'
            });
          } else {
            uni.navigateTo({
              url: '/pages/auth/login'
            });
          }
        }
      }
    }
  });
}

function toPay() {
  router.to(RouteMap.payment, {
    id: orderInfo.value?.order_sn,
    countdown: orderInfo.value?.count_down,
    amount: orderInfo.value?.actual_amount,
    createTime: orderInfo.value?.create_order_time,
    from: 'car',
    isFromOrder: true
  });
}

async function handleCancel() {
  if (orderInfo.value?.actual_order_status == 'WAIT_PAY') {
    // 未支付直接取消
    const res = await cancelOrder(orderInfo.value?.order_sn, true);
    if (res.code == 0) {
      await getOrderInfo();
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      });
    }
  } else {
    router.to(RouteMap.carOrderRefund, { orderSn: orderInfo.value?.order_sn, from: 'orderDetail' });
  }
}

function showBigImage(val: string) {
  uni.previewImage({
    urls: [val]
  });
}

onShow(async () => {
  await getOrderInfo();
});

onLoad(async (options) => {
  orderSn.value = options!.orderSn;
});
</script>

<template>
  <view class="order-details-contain">
    <uni-nav-bar
      v-if="isWechat()"
      :border="false"
      :title="t('LOKey_orderMy')"
      background-color="#FF5A60"
      color="#fff"
      fixed
      left-icon="left"
      status-bar
      @click-left="router.back"
    />
    <view v-if="orderInfo?.actual_order_status == 'WAIT_PAY'" class="order-details-contain-header">
      <view class="order-details-contain-header-t">
        <image src="/static/order_details_wait.png"></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('LOKey_orderToPay') }}</view>
          <view>
            {{
              t('LOKey_orderPayBeforeAt', {
                time: format(Date.now() + Math.abs(orderInfo?.count_down), 'HH:mm:ss')
              })
            }}
          </view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'CANCEL'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_cancel.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('LOKey_orderCancel') }}</view>
          <view>{{ t('DiningPreOrderCancelled') }}</view>
        </view>
      </view>
    </view>

    <view
      v-else-if="orderInfo?.actual_order_status == 'WAIT_CONFIRM'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('TransfeOrderPayConfirm') }}</view>
          <view>{{ t('TransfeOrderConfirm') }}</view>
        </view>
      </view>
    </view>

    <view
      v-else-if="orderInfo?.actual_order_status == 'WAIT_DISPATCH'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('TransfeOrderPaySuccess') }}</view>
          <view>{{ t('TransfeOrderPei') }}</view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'OVERDUE'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_overdue.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('DiningPreOrderAlreadyOverdue') }}</view>
          <view>{{ t('TransferMu') }}</view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('TransfeOrderSuccess') }}</view>
          <view v-if="orderInfo?.order_type == 'CRS'">{{ t('TransfeOrderJie') }}！</view>
          <view v-else>{{ t('TransferScan') }}</view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'COMPLETE'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        ></image>
        <view class="order-details-contain-header-t-v">
          <view>{{ t('OrderListComplete') }}</view>
          <view>{{ t('transferComplete') }}</view>
        </view>
      </view>
    </view>

    <view class="order-details-contain-content">
      <view
        v-if="
          orderInfo?.actual_order_status == 'OVERDUE' ||
          (orderInfo?.actual_order_status == 'CANCEL' && orderInfo?.refund_status != 'WAIT')
        "
        class="order-details-contain-content-refund"
      >
        <view class="order-details-contain-content-refund-t">
          <view class="order-details-contain-content-refund-t-l">
            <text class="order-details-contain-content-refund-t-l-t1">
              {{ t('LOKey_orderTotalAmount') }}
            </text>
            <text class="order-details-contain-content-refund-t-l-t2">
              <text>¥</text>
              {{ orderInfo?.order_amount ? parseFloat(orderInfo?.order_amount) : 0 }}
              <text>JPY</text>
            </text>
          </view>
          <view class="order-details-contain-content-refund-t-r">
            <text>
              {{ t('LDKey_distributionCommissionDetailOrderNo') }}：{{ orderInfo?.order_sn }}
            </text>
            <view @click="copyOrderNo">
              <image src="/static/icon_copy.png"></image>
              {{ t('LRKey_copy') }}
            </view>
          </view>
        </view>
        <view
          v-if="orderInfo?.actual_order_status == 'OVERDUE'"
          class="order-details-contain-content-refund-b"
        >
          {{ t('DiningPreOrderFullyDeducted') }}
          <text class="overdue">{{ t('DiningFullDeduction') }}</text>
        </view>
        <view v-else class="order-details-contain-content-refund-b">
          {{ t('LOKey_orderRefundSuccess') }}
          <text @click="handleOpenCarRefundDetail">{{ t('LOKey_orderRefundDetail') }}</text>
        </view>
      </view>

      <view class="order-details-contain-content-bookingInfo">
        <view class="order-details-contain-content-bookingInfo-car">
          <view class="order-details-contain-content-bookingInfo-car-img">
            <image
              :src="
                orderInfo?.order_type == 'CRS'
                  ? orderInfo?.service_info.images
                    ? orderInfo?.service_info.images
                    : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png'
                  : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png'
              "
            ></image>
            <view :class="orderInfo?.order_type == 'CRS' ? '' : 'innn'">
              {{ orderInfo?.order_type == 'CRS' ? t('TransferHouseSelf') : 'INNN' }}
            </view>
          </view>
          <view class="order-details-contain-content-bookingInfo-car-info">
            <view>
              {{
                orderInfo?.service_type == 'PICKUP'
                  ? t('TransferPickAirport')
                  : t('TransferOrderPickCar')
              }}
            </view>
            <view>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_car.png"
              />
              <text>
                {{
                  orderInfo?.order_type == 'CRS'
                    ? orderInfo?.service_info.car_type_name
                    : t('TransferCarInnnPackageMsg')
                }}
              </text>
              <image
                v-if="orderInfo?.order_type == 'CRS'"
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_people.png"
              />
              <text v-if="orderInfo?.order_type == 'CRS'">
                {{ orderInfo?.service_info.passenger_num }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_package.png"
              />
              <text class="info">
                {{
                  orderInfo?.order_type == 'CRS'
                    ? orderInfo?.service_info.max_package_num
                    : orderInfo?.innn_info.total_package_num
                }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips.png"
                @click="handleOpenCarPackageTips"
              />
            </view>
          </view>
        </view>
        <view class="order-details-contain-content-bookingInfo-address">
          <view class="order-details-contain-content-bookingInfo-address-list">
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image
                  src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_start.png"
                />
                <view>{{ orderInfo?.start_address }}</view>
              </view>
              <view class="order-details-contain-content-bookingInfo-address-list-item-line"></view>
            </view>
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image
                  src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_end.png"
                />
                <view>{{ orderInfo?.end_address }}</view>
              </view>
            </view>
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image src="/static/icon_order_detail_time.png" />
                <view>
                  {{
                    t('TransferCarTimeInfo', {
                      date: orderInfo?.book_date,
                      time: orderInfo?.book_time
                    })
                  }}
                </view>
              </view>
              <view
                v-if="orderInfo?.order_type == 'CRS'"
                class="order-details-contain-content-bookingInfo-address-list-item-tips"
              >
                {{
                  t('TransfeOrderDetail', {
                    km: orderInfo?.service_info.distance,
                    min: orderInfo?.service_info.use_time
                  })
                }}
              </view>
            </view>
          </view>
          <view
            v-if="
              orderInfo?.actual_order_status != 'OVERDUE' &&
              orderInfo?.actual_order_status != 'CANCEL'
            "
            class="order-details-contain-content-bookingInfo-cancel"
          >
            {{ t('LRKey_cancelOrderTip', { date: orderInfo?.free_cancel_time }) }}
          </view>
        </view>
      </view>

      <view
        v-if="orderInfo?.order_type == 'INNN' && orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
        class="order-details-contain-content-qrcode"
        @click="openQrcodePopup"
      >
        <view>{{ t('TransferScanNumber') }}</view>
        <view>
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_qrcode.png"
          />
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_arrow_right.png"
          />
        </view>
      </view>

      <view
        v-if="orderInfo?.order_type == 'INNN' && orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
        class="order-details-contain-content-checkout"
      >
        <view class="order-details-contain-content-checkout-title">{{ t('TransferReceive') }}</view>
        <view class="order-details-contain-content-checkout-tips">
          {{ t('TransferReceiveDetail') }}
        </view>
        <view class="order-details-contain-content-checkout-img">
          <view class="order-details-contain-content-checkout-img-t">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/order_detail_t1_checkout_small.png"
              @click="
                showBigImage(
                  'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/dbgxT1.png'
                )
              "
            />
            <view>{{ t('TransferTone') }}</view>
          </view>
          <view class="order-details-contain-content-checkout-img-t">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/order_detail_t2_checkout_small.png"
              @click="
                showBigImage(
                  'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/dbgxT2.png'
                )
              "
            />
            <view>{{ t('TransferTtwo') }}</view>
          </view>
        </view>
      </view>

      <view
        v-if="
          orderInfo?.order_type == 'CRS' &&
          (orderInfo?.actual_order_status == 'ORDER_SUCCESS' ||
            orderInfo?.actual_order_status == 'COMPLETE')
        "
        class="order-details-contain-content-driver"
      >
        <view class="order-details-contain-content-driver-t">
          <image
            :src="
              orderInfo?.driver_info?.photo
                ? orderInfo?.driver_info?.photo
                : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/driver_no_image.png'
            "
          />
          <view class="order-details-contain-content-driver-t-info">
            <view class="order-details-contain-content-driver-t-info-title">
              {{ t('TransfeOrderLeaderDetail') }}
              <view @click="contactDriver">{{ t('TransfeOrderLeaderContact') }}</view>
            </view>
            <view class="order-details-contain-content-driver-t-info-cont">
              <view>
                {{ t('TransfeOrderLeader') }}：{{
                  orderInfo?.driver_info?.nickname ? orderInfo?.driver_info?.nickname : '--'
                }}
              </view>
              <view>
                {{ t('TransfeOrderLeaderCarLicense') }}：{{
                  orderInfo?.driver_info?.car_license ? orderInfo?.driver_info?.car_license : '--'
                }}
              </view>
            </view>
          </view>
        </view>
        <view class="order-details-contain-content-driver-b">
          {{ t('TransfeOrderLeaderService') }}。
        </view>
      </view>

      <view class="order-details-contain-content-booker">
        <view class="order-details-contain-content-booker-title">
          {{ t('LRKey_reservationDetail') }}
        </view>
        <view class="order-details-contain-content-booker-input">
          <view class="order-details-contain-content-booker-input-item">
            <view>{{ t('TransferPassengerName') }}</view>
            <view>{{ orderInfo?.booking_name ? orderInfo?.booking_name : '--' }}</view>
          </view>
          <view class="order-details-contain-content-booker-input-item">
            <view>{{ t('LCKey_mobile') }}</view>
            <view>
              {{ orderInfo?.phone_area ? orderInfo?.phone_area : '--' }}
              {{ orderInfo?.booking_mobile ? orderInfo?.booking_mobile : '--' }}
            </view>
          </view>
          <view class="order-details-contain-content-booker-input-item">
            <view>{{ t('LCKey_note') }}</view>
            <view>{{ orderInfo?.member_message ? orderInfo?.member_message : '无' }}</view>
          </view>
        </view>
      </view>

      <view
        v-if="
          orderInfo?.order_type == 'CRS' && orderInfo?.emergency_name && orderInfo?.emergency_mobile
        "
        class="order-details-contain-content-booker"
      >
        <view class="order-details-contain-content-booker-title">
          {{ t('TransferEmergencyContact') }}
        </view>
        <view class="order-details-contain-content-booker-input">
          <view class="order-details-contain-content-booker-input-item">
            <view>{{ t('TransferContacts') }}</view>
            <view>{{ orderInfo?.emergency_name ? orderInfo?.emergency_name : '无' }}</view>
          </view>
          <view class="order-details-contain-content-booker-input-item">
            <view>{{ t('LCKey_mobile') }}</view>
            <view>
              {{
                orderInfo?.emergency_mobile
                  ? orderInfo?.emergency_phone_area + ' ' + orderInfo?.emergency_mobile
                  : '无'
              }}
            </view>
          </view>
        </view>
      </view>

      <view class="order-details-contain-content-orderInfo">
        <view class="order-details-contain-content-orderInfo-title">
          {{ t('LTKey_tripCheckinOrderInfo') }}
        </view>
        <view class="order-details-contain-content-orderInfo-item">
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('LOKey_orderNo') }}</view>
            <view>
              {{ orderInfo?.order_sn }}
              <text class="copy" @click="copyOrderNo">{{ t('LRKey_copy') }}</text>
            </view>
          </view>
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('LRKey_orderTime') }}</view>
            <view>
              {{ orderInfo?.create_order_time }}
            </view>
          </view>
          <view
            v-if="orderInfo?.cancel_time"
            class="order-details-contain-content-orderInfo-item-list"
          >
            <view>{{ t('LOKey_orderCancelTime') }}</view>
            <view>
              {{ orderInfo?.cancel_time }}
            </view>
          </view>
        </view>
        <view
          v-if="orderInfo?.actual_order_status != 'WAIT_PAY'"
          class="order-details-contain-content-orderInfo-item"
        >
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('TransferProUseCarPrice') }}</view>
            <view>
              {{
                orderInfo?.order_type == 'CRS'
                  ? t('LPKey_moneyX', {
                      money: orderInfo?.service_info?.price
                        ? parseFloat(orderInfo?.service_info?.price)
                        : 0
                    })
                  : t('LPKey_moneyX', {
                      money: orderInfo?.innn_info?.total_car_price
                        ? parseFloat(orderInfo?.innn_info?.total_car_price)
                        : 0
                    })
              }}
            </view>
          </view>
          <view
            v-if="orderInfo?.order_type == 'CRS' && orderInfo?.service_info?.pick_up_sign == 'Y'"
            class="order-details-contain-content-orderInfo-item-list"
          >
            <view>{{ t('TransferPickUp') }}</view>
            <view
              :class="
                orderInfo?.additional_service_info?.pick_up_sign?.isLimitTimeFree ? 'line' : ''
              "
            >
              {{
                t('LPKey_moneyX', {
                  money: orderInfo?.additional_service_info?.pick_up_sign?.price
                    ? parseFloat(orderInfo?.additional_service_info?.pick_up_sign?.price)
                    : 0
                })
              }}
            </view>
          </view>
          <view
            v-if="orderInfo?.order_type == 'CRS' && orderInfo?.service_info?.child_seat_add_num > 0"
            class="order-details-contain-content-orderInfo-item-list"
          >
            <view>{{ t('TransferChildSeat') }}</view>
            <view
              :class="
                orderInfo?.additional_service_info?.children_seat_add?.isLimitTimeFree ? 'line' : ''
              "
            >
              {{
                t('LPKey_moneyX', {
                  money: orderInfo?.service_info?.child_seat_add_amount
                    ? parseFloat(orderInfo?.service_info?.child_seat_add_amount)
                    : 0
                })
              }}
            </view>
          </view>
          <view
            v-if="orderInfo?.order_type == 'INNN' && orderInfo?.innn_info?.extra_package_num > 0"
            class="order-details-contain-content-orderInfo-item-list"
          >
            <view>{{ t('TransfrExtra') }}</view>
            <view>
              {{
                t('LPKey_moneyX', {
                  money: orderInfo?.innn_info?.package_total_amount
                    ? parseFloat(orderInfo?.innn_info?.package_total_amount)
                    : 0
                })
              }}
            </view>
          </view>
        </view>
        <view
          v-if="orderInfo?.actual_order_status != 'WAIT_PAY' && orderInfo?.order_type == 'CRS'"
          class="order-details-contain-content-orderInfo-item"
        >
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('LRKey_coupon') }}</view>
            <view
              :class="
                orderInfo?.actual_order_status == 'OVERDUE' ||
                (orderInfo?.actual_order_status == 'CANCEL' && orderInfo?.refund_status != 'WAIT')
                  ? ''
                  : 'red'
              "
            >
              -{{
                t('LPKey_moneyX', {
                  money: orderInfo?.coupon_amount ? parseFloat(orderInfo?.coupon_amount) : 0
                })
              }}
            </view>
          </view>
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('LRKey_scoreRedemption') }}</view>
            <view
              :class="
                orderInfo?.actual_order_status == 'OVERDUE' ||
                (orderInfo?.actual_order_status == 'CANCEL' && orderInfo?.refund_status != 'WAIT')
                  ? ''
                  : 'red'
              "
            >
              -{{
                t('LPKey_moneyX', {
                  money: orderInfo?.bal_amount ? parseFloat(orderInfo?.bal_amount) : 0
                })
              }}
            </view>
          </view>
        </view>
        <view
          v-if="
            orderInfo?.actual_order_status == 'OVERDUE' ||
            (orderInfo?.actual_order_status == 'CANCEL' && orderInfo?.refund_status != 'WAIT')
          "
          class="order-details-contain-content-orderInfo-item"
        >
          <!--          <view class="order-details-contain-content-orderInfo-item-list">-->
          <!--            <view>{{ t('LOKey_orderAmountPay') }}</view>-->
          <!--            <view>-->
          <!--              {{-->
          <!--                t('LPKey_moneyX', {-->
          <!--                  money: orderInfo?.actual_amount ? orderInfo?.actual_amount : 0-->
          <!--                })-->
          <!--              }}-->
          <!--            </view>-->
          <!--          </view>-->
          <view
            v-if="orderInfo?.order_type == 'CRS'"
            class="order-details-contain-content-orderInfo-item-list"
          >
            <view>{{ t('LOKey_orderRefundScore') }}</view>
            <view class="red">
              {{
                t('LPKey_moneyX', {
                  money: orderInfo?.refund_bal_amount ? orderInfo?.refund_bal_amount : 0
                })
              }}
            </view>
          </view>
          <view class="order-details-contain-content-orderInfo-item-list">
            <view>{{ t('LOKey_orderRefundAmount') }}</view>
            <view class="red">
              {{
                t('LPKey_moneyX', {
                  money: orderInfo?.refund_amount ? orderInfo?.refund_amount : 0
                })
              }}
            </view>
          </view>
        </view>
        <view
          v-if="orderInfo?.actual_order_status != 'OVERDUE' && orderInfo?.refund_status == 'WAIT'"
          class="order-details-contain-content-orderInfo-total"
        >
          <text>{{ t('TransfeOrderTotal') }}</text>
          <text>
            {{
              t('LPKey_moneyX', { money: orderInfo?.actual_amount ? orderInfo?.actual_amount : 0 })
            }}
          </text>
        </view>
      </view>

      <view
        v-if="
          orderInfo?.actual_order_status == 'WAIT_PAY' ||
          orderInfo?.actual_order_status == 'WAIT_CONFIRM' ||
          orderInfo?.actual_order_status == 'WAIT_DISPATCH' ||
          orderInfo?.actual_order_status == 'ORDER_SUCCESS'
        "
        class="order-details-contain-content-cancelBtn"
        @click="handleCancel"
      >
        {{ t('tripCancelOrder') }}
      </view>
    </view>

    <view
      v-if="orderInfo?.actual_order_status == 'WAIT_PAY'"
      :style="{ zIndex: bottomZIndex }"
      class="order-details-contain-bottom"
    >
      <view class="order-details-contain-bottom-l">
        <text>{{ t('TransfeOrderTotal') }}</text>
        {{ t('LPKey_moneyX', { money: orderInfo?.actual_amount ? orderInfo?.actual_amount : 0 }) }}
      </view>
      <view class="order-details-contain-bottom-r">
        <view @click="openPricePopup">
          {{ t('DiningPreOrderDetails') }}
          <image
            :src="
              pricePopupOpen
                ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_down1.png'
                : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_up.png'
            "
          />
        </view>
        <view @click="toPay">{{ t('LRKey_payNow') }}</view>
      </view>
    </view>

    <view v-if="orderInfo?.actual_order_status != 'WAIT_PAY'" class="order-details-contain-bottom1">
      <view class="order-details-contain-bottom1-v" @click="router.to(RouteMap.carIndex, {}, true)">
        {{ t('DiningPreOrderBookAgain') }}
      </view>
      <view
        v-if="orderInfo?.order_type == 'CRS' && orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
        class="order-details-contain-bottom1-v"
        @click="contactDriver"
      >
        {{ t('TransfeOrderLeaderContact') }}
        <view></view>
      </view>
    </view>
  </view>

  <apt-car-package-tips ref="carPackageTipsRef" />

  <apt-car-order-package
    ref="carOrderPackageRef"
    :extra-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.extra_package_num : 0"
    :free-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.free_package_num : 0"
    :total-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.total_package_num : 0"
  />

  <apt-car-refund-detail ref="carRefundDetailRef" :order-sn="orderInfo?.order_sn" />

  <uni-popup
    ref="pricePopupRef"
    :safe-area="false"
    type="bottom"
    @maskClick="handleClosePricePopup"
  >
    <view class="car-checkout-price-popup">
      <view class="car-checkout-price-popup__head">
        <text class="text-xl text-primary font-medium">{{ t('DiningPreOrderPriceDetails') }}</text>
        <view class="car-checkout-price-popup__close-btn" @click.stop="handleClosePricePopup">
          <image class="w-full h-full" src="/static/icon_close.png" />
        </view>
      </view>
      <view class="car-checkout-price-popup__body">
        <view class="car-checkout-price-contain">
          <view class="car-checkout-price-contain-item">
            <view class="car-checkout-price-contain-item-title">
              {{ t('DiningPreOrderBasiceExpenses') }}
            </view>
            <view class="car-checkout-price-contain-item-content">
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProUseCarPrice') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  {{
                    orderInfo?.order_type == 'CRS'
                      ? t('LPKey_moneyX', {
                          money: orderInfo?.service_info?.price
                            ? parseFloat(orderInfo?.service_info?.price)
                            : 0
                        })
                      : t('LPKey_moneyX', {
                          money: orderInfo?.innn_info?.total_car_price
                            ? parseFloat(orderInfo?.innn_info?.total_car_price)
                            : 0
                        })
                  }}
                </text>
              </view>
              <view
                v-if="
                  orderInfo?.order_type == 'CRS' && orderInfo?.service_info?.pick_up_sign == 'Y'
                "
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProPickUpPrice') }}
                  <text v-if="orderInfo?.additional_service_info?.pick_up_sign?.isLimitTimeFree">
                    （{{ t('TransferLimitedTimeFree') }}）
                  </text>
                </text>
                <text
                  :class="
                    orderInfo?.additional_service_info?.pick_up_sign?.isLimitTimeFree ? 'free' : ''
                  "
                  class="car-checkout-price-contain-item-content-v-t2"
                >
                  {{
                    t('LPKey_moneyX', {
                      money: orderInfo?.additional_service_info?.pick_up_sign?.price
                        ? parseFloat(orderInfo?.additional_service_info?.pick_up_sign?.price)
                        : 0
                    })
                  }}
                </text>
              </view>
              <view
                v-if="
                  orderInfo?.order_type == 'CRS' && orderInfo?.service_info?.child_seat_add_num > 0
                "
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProSeatPrice') }}
                  <text
                    v-if="orderInfo?.additional_service_info?.children_seat_add?.isLimitTimeFree"
                  >
                    （{{ t('TransferLimitedTimeFree') }}）
                  </text>
                </text>
                <text
                  :class="
                    orderInfo?.additional_service_info?.children_seat_add?.isLimitTimeFree
                      ? 'free'
                      : ''
                  "
                  class="car-checkout-price-contain-item-content-v-t2"
                >
                  {{
                    t('LPKey_moneyX', {
                      money: orderInfo?.additional_service_info?.children_seat_add?.price
                        ? parseFloat(orderInfo?.additional_service_info?.children_seat_add?.price)
                        : 0
                    })
                  }}
                  ×{{ orderInfo?.service_info?.child_seat_add_num }}
                </text>
              </view>
              <view
                v-if="
                  orderInfo?.order_type == 'INNN' && orderInfo?.innn_info?.extra_package_num > 0
                "
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransfrExtra') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  {{
                    t('LPKey_moneyX', {
                      money: (
                        (orderInfo?.innn_info?.package_total_amount
                          ? parseFloat(orderInfo?.innn_info?.package_total_amount)
                          : 0) / orderInfo?.innn_info?.extra_package_num
                      ).toFixed(0)
                    })
                  }}
                  ×{{ orderInfo?.innn_info?.extra_package_num }}
                </text>
              </view>
            </view>
          </view>
          <view v-if="orderInfo?.order_type == 'CRS'" class="car-checkout-price-contain-item">
            <view class="car-checkout-price-contain-item-title">
              {{ t('DiningPreOrderDiscountAmount') }}
            </view>
            <view class="car-checkout-price-contain-item-content">
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('LRKey_coupon') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  -{{
                    t('LPKey_moneyX', {
                      money: orderInfo?.coupon_amount ? parseFloat(orderInfo?.coupon_amount) : 0
                    })
                  }}
                </text>
              </view>
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('LRKey_scoreRedemption') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  -{{
                    t('LPKey_moneyX', {
                      money: orderInfo?.bal_amount ? parseFloat(orderInfo?.bal_amount) : 0
                    })
                  }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>

  <uni-popup ref="qrcodePopupRef" type="center" @maskClick="handleCloseQrcodePopup">
    <uv-qrcode
      ref="qrcodeRef"
      :options="qrcodeOptions"
      :start="false"
      :value="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.qrcode_info : 'test'"
    ></uv-qrcode>
  </uni-popup>
</template>

<style lang="scss" scoped>
.order-details-contain {
  padding-bottom: 204rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 204rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 204rpx);

  &-header {
    padding: 12rpx 30rpx 60rpx;
    background: #ff5a60;

    &-t {
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;

      image {
        display: block;
        width: 72rpx;
        height: 72rpx;
        margin-right: 16rpx;
      }

      &-v {
        view {
          &:first-child {
            font-weight: 500;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 50rpx;
          }

          &:last-child {
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 34rpx;
          }
        }
      }
    }
  }

  &-content {
    margin-top: -66rpx;

    &-refund {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 32rpx 32rpx 56rpx;
      margin-bottom: 20rpx;

      &-t {
        border-bottom: 1px solid #f4f4f4;
        padding-bottom: 30rpx;

        &-l {
          display: flex;
          align-items: center;

          &-t1 {
            font-weight: 500;
            font-size: 24rpx;
            color: #3d3d3d;
            line-height: 36rpx;
            margin-right: 4rpx;
          }

          &-t2 {
            font-weight: 500;
            font-size: 36rpx;
            color: #d13820;
            line-height: 36rpx;

            text {
              font-size: 24rpx;
            }
          }
        }

        &-r {
          margin-top: 18rpx;
          display: flex;
          align-items: center;

          text {
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
            line-height: 24rpx;
          }

          view {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
            line-height: 24rpx;
            margin-left: 16rpx;

            image {
              display: block;
              width: 28rpx;
              height: 28rpx;
              margin-right: 4rpx;
            }
          }
        }
      }

      &-b {
        padding-top: 32rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
        line-height: 24rpx;

        text {
          color: #006ff6;

          &.overdue {
            color: #d13820;
          }
        }
      }
    }

    &-bookingInfo {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 32rpx;
      margin-bottom: 20rpx;

      &-car {
        padding-bottom: 34rpx;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        align-items: center;

        &-img {
          position: relative;

          image {
            display: block;
            width: 180rpx;
            height: 120rpx;
          }

          view {
            position: absolute;
            top: 0;
            left: 0;
            padding: 2rpx 4rpx;
            background: #12c584;
            border-radius: 4rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: #ffffff;
            line-height: 26rpx;

            &.innn {
              background: #fc752f;
            }
          }
        }

        &-info {
          margin-left: 20rpx;

          view {
            &:first-child {
              font-weight: 500;
              font-size: 32rpx;
              color: #3d3d3d;
              line-height: 44rpx;
            }

            &:last-child {
              display: flex;
              align-items: center;
              margin-top: 12rpx;

              image {
                display: block;
                width: 24rpx;
                height: 24rpx;
              }

              text {
                margin-left: 12rpx;
                margin-right: 20rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #3d3d3d;
                line-height: 34rpx;

                &.info {
                  margin-right: 8rpx;
                }
              }
            }
          }
        }
      }

      &-address {
        padding-top: 30rpx;

        &-list {
          &-item {
            position: relative;
            padding-bottom: 32rpx;

            &:last-child {
              padding-bottom: 0;
            }

            &-top {
              display: flex;
              align-items: flex-start;

              image {
                display: block;
                width: 32rpx;
                height: 32rpx;
                margin-right: 12rpx;
                position: relative;
                margin-top: 4rpx;
                z-index: 1;
              }

              view {
                flex: 1;
                line-height: 40rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #3d3d3d;
              }
            }

            &-line {
              position: absolute;
              top: 36rpx;
              left: 15rpx;
              bottom: -10rpx;
              width: 2rpx;
              background: #e7e7e7;
            }

            &-tips {
              font-weight: 400;
              font-size: 24rpx;
              color: #8c8c8c;
              line-height: 34rpx;
              padding-left: 44rpx;
              margin-top: 8rpx;
            }
          }
        }
      }

      &-cancel {
        margin-top: 32rpx;
        background: #fff3ec;
        height: 64rpx;
        line-height: 64rpx;
        padding: 0 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #b84c16;
        border-radius: 6rpx;
      }
    }

    &-qrcode {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 34rpx 32rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      view {
        &:first-child {
          font-weight: 500;
          font-size: 36rpx;
          color: #3d3d3d;
          line-height: 50rpx;
        }

        &:last-child {
          display: flex;
          align-items: center;

          image {
            display: block;

            &:first-child {
              width: 48rpx;
              height: 48rpx;
            }

            &:last-child {
              width: 28rpx;
              height: 28rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }

    &-checkout {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 40rpx 32rpx;
      margin-bottom: 20rpx;

      &-title {
        font-weight: 500;
        font-size: 36rpx;
        color: #3d3d3d;
        line-height: 50rpx;
      }

      &-tips {
        margin: 32rpx 0;
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-img {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-t {
          image {
            display: block;
            width: 334rpx;
            height: 152rpx;
          }

          view {
            margin-top: 22rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #3d3d3d;
            line-height: 34rpx;
            text-align: center;
          }
        }
      }
    }

    &-driver {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 40rpx 32rpx;
      margin-bottom: 20rpx;

      &-t {
        display: flex;

        image {
          display: block;
          width: 128rpx;
          height: 174rpx;
        }

        &-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;

          &-title {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 36rpx;
            color: #3d3d3d;
            line-height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            view {
              font-weight: 500;
              font-size: 24rpx;
              color: #51668f;
              line-height: 34rpx;
            }
          }

          &-cont {
            view {
              &:first-child {
                font-weight: 400;
                font-size: 28rpx;
                color: #3d3d3d;
                line-height: 40rpx;
              }

              &:last-child {
                margin-top: 6rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #3d3d3d;
                line-height: 40rpx;
              }
            }
          }
        }
      }

      &-b {
        margin-top: 22rpx;
        background: #f4f4f4;
        border-radius: 8rpx;
        line-height: 40rpx;
        padding-left: 16rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #979797;
      }
    }

    &-booker {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 40rpx 32rpx;
      margin-bottom: 20rpx;

      &-title {
        font-weight: 500;
        font-size: 36rpx;
        color: #3d3d3d;
        line-height: 50rpx;
      }

      &-input {
        margin-top: 8rpx;

        &-item {
          border-bottom: 1px solid #f4f4f4;

          &:last-child {
            border-bottom: none;
          }

          display: flex;
          align-items: center;
          padding: 32rpx 0;

          view {
            &:first-child {
              font-weight: 400;
              font-size: 28rpx;
              color: #adaeb0;
              line-height: 40rpx;
              width: 212rpx;
            }

            &:last-child {
              flex: 1;
              font-weight: 400;
              font-size: 28rpx;
              color: #3d3d3d;
              line-height: 40rpx;
            }
          }
        }
      }
    }

    &-orderInfo {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 40rpx 32rpx 32rpx;
      margin-bottom: 20rpx;

      &-title {
        font-weight: 500;
        font-size: 36rpx;
        color: #3d3d3d;
        line-height: 50rpx;
      }

      &-item {
        padding: 40rpx 0 32rpx;
        border-bottom: 1px solid #f4f4f4;

        &:last-child {
          border-bottom: none;
        }

        &-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 32rpx;

          &:last-child {
            margin-bottom: 0;
          }

          view {
            &:first-child {
              font-weight: 400;
              font-size: 28rpx;
              color: #adaeb0;
              line-height: 40rpx;
            }

            &:last-child {
              font-weight: 400;
              font-size: 28rpx;
              color: #3d3d3d;
              line-height: 40rpx;

              text {
                &.copy {
                  color: #006ff6;
                }
              }

              &.line {
                text-decoration: line-through;
              }

              &.red {
                color: #ec1d39;
              }
            }
          }
        }
      }

      &-total {
        border-top: 1px solid #f4f4f4;
        padding-top: 32rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        text {
          &:first-child {
            font-weight: 400;
            font-size: 20rpx;
            color: #3d3d3d;
            line-height: 28rpx;
          }

          &:last-child {
            font-weight: 500;
            font-size: 36rpx;
            color: #3d3d3d;
            line-height: 50rpx;
          }
        }
      }
    }

    &-cancelBtn {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-weight: 400;
      font-size: 36rpx;
      color: #3d3d3d;
      text-align: center;
    }
  }

  &-bottom {
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
    z-index: 10;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 32rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);

    &-l {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #d13820;
      line-height: 50rpx;

      text {
        font-weight: 400;
        font-size: 20rpx;
        color: #3d3d3d;
        line-height: 28rpx;
      }
    }

    &-r {
      display: flex;
      align-items: center;

      view {
        &:first-child {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 20rpx;
          color: #979797;
          line-height: 28rpx;
          margin-right: 6rpx;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
          }
        }

        &:last-child {
          margin-left: 24rpx;
          padding: 0 32rpx;
          height: 72rpx;
          background: #ff5a60;
          border-radius: 8rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 72rpx;
        }
      }
    }
  }
}

.order-details-contain-bottom1 {
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
  z-index: 10;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16rpx 32rpx;
  padding-bottom: 16rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);

  &-v {
    padding: 0 32rpx;
    height: 72rpx;
    background: #ffffff;
    border: 1px solid #f4f4f4;
    border-radius: 8rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #3d3d3d;
    line-height: 72rpx;
    margin-left: 20rpx;
    position: relative;

    view {
      position: absolute;
      top: 10rpx;
      right: 18rpx;
      width: 16rpx;
      height: 16rpx;
      border-radius: 100%;
      background: #ff5a60;
    }
  }
}

.car-checkout-price-popup {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-top-left-radius: 28rpx;
  border-top-right-radius: 28rpx;
  padding-bottom: 104rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx);

  &__head {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 28rpx;
    padding-top: 44rpx;
  }

  &__close-btn {
    position: absolute;
    top: 56rpx;
    right: 26rpx;
    width: 28rpx;
    height: 28rpx;
  }

  &__body {
    flex: 1;
    padding: 0 24rpx;
  }
}

.car-checkout-price-contain {
  padding-bottom: 64rpx;

  &-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-content {
      &-v {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-t1 {
          font-weight: 400;
          font-size: 24rpx;
          color: #979797;
          line-height: 34rpx;
        }

        &-t2 {
          font-weight: 600;
          font-size: 24rpx;
          color: #3d3d3d;
          line-height: 34rpx;

          &.free {
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
